<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/static/img/logo.png"/>
    <title>启慧信息技术公司人事管理系统</title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/mmss.css"/>
    <link rel="stylesheet" href="/static/css/font-awesome.min.css"/>
    <!--[if lt IE 9]>
    <script src="/static/js/html5shiv.min.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body>
<section>
    <div class="container">
        <div class="row ">
            <div class="col-xs-12">
                <br/>
                <ol class="breadcrumb">
                    <li><a href="/main"><span class="glyphicon glyphicon-home"></span>&nbsp;后台首页</a></li>
                    <li class="active">系统管理</li>
                    <li class="active">角色管理</li>
                </ol>
                <!--顶部搜索栏开始,按照指定的条件进行搜索-->
                <form th:action="@{/role/list}">
                    <div class="input-group line left">
                        <span class="input-group-addon" id="basic-addon2">
                            <span class="glyphicon glyphicon-search">
                            </span>
                        </span>

                        <input name="searchContent" type="text" class="form-control" placeholder="输入关键字搜索" aria-describedby="basic-addon2">
                    </div>
                    <select name = "option" class="form-control line left">
                        <option value="role_id">角色id</option>
                        <option value="role_name">角色名称</option>
                        <option value="role_code">角色代号</option>
                        <option value="role_state">角色状态</option>
                    </select>

                    <button shiro:hasPermission="role:search" type="submit" class=" btn btn-primary ">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                    <a shiro:hasPermission="role:add" href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add1">添加</a>
                </form>
                <br/><br/>
                <!--顶部搜索栏结束-->
                <!--table表用来显示数据-->
                <table class="table table-bordered  table-condensed table-striped text-center bg-info">
                    <!--表头信息开始-->
                    <thead>
                        <tr class="info">
                            <th class="text-center">角色编号</th>  <!--0-->
                            <th class="text-center">角色名称</th>  <!--1-->
                            <th class="text-center">角色代号</th> <!--2-->
                            <th class="text-center">角色状态</th> <!--3-->
                            <th class="text-center">操作</th>
                        </tr>
                    </thead>
                    <!--表头信息结束-->
                    <!--表数据开始-->
                    <tbody>
                        <!--输出封装在model中的pageInfo数据-->
                        <tr th:each="role:${pageInfo.getResult()}">
                            <td th:text="${role.roleId}"></td>
                            <td th:text="${role.roleName}"></td>
                            <td th:text="${role.roleCode}"></td>
                            <td th:text="${role.roleState}"></td>
                            <td>
                                <a shiro:hasPermission="role:edit"  onclick="edit(this)"
                                    class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edit">编辑</a>
                                <a shiro:hasPermission="role:del"
                                   class="btn btn-warning btn-sm" href="" th:onclick="|del(${role.roleId})|">删除</a>
                                <a shiro:hasPermission="role:permission" href="#FPpermission"
                                   onclick="permissionEcho(this)"
                                   class="btn btn-success btn-sm"  data-toggle="modal" data-target="#myModal">分配权限</a>
                            </td>
                        <!--模态框开始-->
                            <!--添加模态框开始-->
                            <div class="modal fade" id="add1" tabindex="-1" role="dialog"  aria-labelledby="add11">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title" id="add11">添加</h4>
                                        </div>
                                        <form th:action="@{/role/add}" method="post">
                                            <div class="modal-body">
                                                <ul>
                                                    <li class="form-inline">
                                                        <label><span>角色名称</span></label>
                                                        <input type="text" name="roleName"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>角色代号</span></label>
                                                        <input type="text" name="roleCode"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>角色状态</span></label>
                                                        <input type="text" name="roleState"/>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--模态框底部的取消和保存按钮-->
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                                                    取消
                                                </button>
                                                <button type="submit" class="btn btn-primary btn-sm">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!--添加模态框结束-->
                            <!--修改模态框开始-->
                            <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                                            <h4 class="modal-title" id="myModalLabel1">编辑</h4>
                                        </div>
                                        <form th:action="@{/role/edit}" method="post">
                                            <div class="modal-body">
                                                <ul>
                                                    <li>
                                                        <label><span>角色id</span></label>
                                                        <input type="text" readonly name="roleId" id="roleId"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>角色名称</span></label>
                                                        <input type="text" name="roleName"  id="roleName"/>
                                                    </li>
                                                    <li class="form-inline">
                                                        <label><span>角色代号</span></label>
                                                        <input type="text" name="roleCode" id="roleCode"/>
                                                    </li>

                                                </ul>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                                <button type="submit" class="btn btn-primary btn-sm">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!--修改模态框结束-->
                            <!--分配权限model开始-->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">权限分配</h4>
                                        </div>
                                        <form id="fpPermissionForm" action="#" method="post">
                                            <div class="modal-body">
                                                <ul id="fpPermissionModel">
                                                    <input type="hidden" name="roleId" id="fpModelRoleId"/>
                                                    <li th:each="permission:${permissionList}" >
                                                        <label><span th:text="${permission.permissionName}"></span></label>
                                                        <input type="checkbox" th:id="${permission.permissionName}" name="permissionIds" th:value="${permission.permissionId}"/>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                                <button type="submit" onclick="fpPermissionCommit()" class="btn btn-primary btn-sm">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!--分配权限model结束-->
                        <!--模态框结素-->
                    </tbody>
                    <!--表数据结束-->
                </table>



                <!--分页-->
                <ul class="pagination right">
                    <div>
                        当前第 [[${pageInfo.pageNum}]]页，共 [[${pageInfo.pages}]] 页， 共 [[${pageInfo.total}]] 条记录
                    </div>
                    <!--上一页按钮-->
                    <li th:class="${pageInfo.getPageNum()<=1 ? 'disabled' :''}">
                        <a th:disabled="${pageInfo.getPageNum()<=1}" onclick="return checkDisable(this)" href="#" th:href="@{/role/list(pageNum=${pageInfo.getPageNum()-1},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}"  aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                    </li>

                    <li th:class="${pageInfo.getPageNum()==1 ? 'active' :''}"><a href="#" th:href="@{/role/list(pageNum=1,pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}">1</a></li>

                    <li ><a href="#">...</a></li>

                    <li th:if="${pageInfo.getPageNum()!=1 and pageInfo.getPageNum()!=pageInfo.getPages()}" th:class="active"><a href="#" th:text="${pageInfo.getPageNum()}"><span class="sr-only"></span></a></li>

                    <li ><a href="#">...</a></li>

                    <li th:class="${pageInfo.getPageNum()==pageInfo.getPages() ? 'active' :''}"><a href="#" th:href="@{/role/list(pageNum=${pageInfo.getPages()},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}" th:text="${pageInfo.getPages()}"></a></li>

                    <!--下一页按钮-->
                    <li th:class="${pageInfo.getPageNum()>=pageInfo.getPages() ? 'disabled' :''}">
                        <a th:disabled="${pageInfo.getPageNum()>=pageInfo.getPages()}" onclick="return checkDisable(this)"  href="#" th:href="@{/role/list(pageNum=${pageInfo.getPageNum()+1},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                    </li>

                </ul>


            </div>
            <!--右侧内容结束-->
        </div>
    </div>
</section>
</body>
</html>

<script src="/static/js/jquery-1.11.3.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script>
    //删除
    function del(roleId){
        var url="/role/del?roleId="+roleId;
        if(confirm("您确定要删除该条记录吗?")){
            $.ajax({
                url:url,
                type:"post"
            })
        }
    }

    function checkDisable(obj) {
        var attr = $(obj).attr("disabled");
        return attr !== "disabled";
    }
    //清空模态框之前勾选的
    function clear() {
        var checkBoxes=$("#fpPermissionModel").find("input");
        for(var i=0;i<checkBoxes.length;i++){
            checkBoxes.eq(i).prop("checked",false);
        }
    }
    //用户权限关系回显
    function permissionEcho(ob) {
        //清空前一次的选择
        clear();
        //开始查询并勾选
        var aData =$(ob).parent().parent().find("td");
        //给model框隐藏域放入roleId
        $("#fpModelRoleId").val(aData.eq(0).text());
        $.ajax({
            url:"/role-permission/FPpermission",
            data:{
                roleId:aData.eq(0).text()
            },success(data){
                var idSelector="";
                for (const permissionName of data.permissionNameList) {
                    idSelector="#"+permissionName;
                    $(idSelector).prop("checked",true);
                }
            }
        })
    }

    //提交分配权限
    function fpPermissionCommit(){
        $.ajax({
            url:"/role-permission/fpCommit",
            data:$("#fpPermissionForm").serialize()
        })
    }
    //编辑角色数据回显
    function edit(obj){
        var aDate =$(obj).parent().parent().find("td");
        console.log(aDate.eq(0).text())
        $("#roleId").val(aDate.eq(0).text());
        $("#roleName").val(aDate.eq(1).text());
        $("#roleCode").val(aDate.eq(2).text());

    }


</script>